<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <!-- <img src="捕获.PNG" alt="d" id="wode"> -->
    <p>画布</p>
    <canvas id="myCanvas" width="250" height="300" style="border:1px solid #f59494;" onclick="f()"></canvas>

    <!-- <div id="di">
        <img src="QQ截图20200923082606.png" alt="d">
    </div> -->
    <input type="file" name="pics" id="pics" multiple="multiple" accept="image/*" capture="camera" onchange="showImg(this)" />
    <div id="imgshow" style="margin-top: 20px;"></div>
    <script>
        function f() {
            var _data = document.getElementById("imgshow").getElementsByTagName('img')[0];
            var c = document.getElementById("myCanvas");
            var ctx = c.getContext("2d");
            ctx.drawImage(_data, 10, 10);
        }

        function showImg(obj) {
            var files = obj.files
            getImgsByFileReader(document.getElementById("imgshow"), files)
        }

        function getImgsByFileReader(el, files) {
            for (var i = 0; i < files.length; i++) {
                let img = document.createElement('img')
                img.setAttribute('style', 'width: 40px; height: 40px; vertical-align: middle; margin-right: 5px;')
                el.appendChild(img)
                var reader = new FileReader()
                reader.onload = function(e) {
                    img.src = e.target.result
                }
                reader.readAsDataURL(files[i])
            }
        }
    </script>

    <!-- <script>
        function f() {
            var c = document.getElementById("myCanvas");
            var ctx = c.getContext("2d");
            var a = document.getElementById("wode");

            var _data = document.getElementById("imgshow").getElementsByTagName('img')[0];
            ctx.drawImage(_data, 10, 10);
            console.log(_data);
        }

        //在DIV中显示照片方法
        function showImg(obj) {
            var files = obj.files
            getImgsByFileReader(document.getElementById("imgshow"), files)
        }

        function getImgsByFileReader(el, files) {
            for (var i = 0; i < files.length; i++) {
                let img = document.createElement('img')
                img.setAttribute('style', 'width: 40px; height: 40px; vertical-align: middle; margin-right: 5px;')
                el.appendChild(img)
                var reader = new FileReader()
                reader.onload = function(e) {
                    img.src = e.target.result
                }
                reader.readAsDataURL(files[i])
            }
        }
    </script> -->




</body>

<!-- <script>
    // var canvas = document.getElementById('myCanvas');
    // var ctx = canvas.getContext('2d');
    // ctx.fillStyle = '#FF0000';
    // ctx.fillRect(0, 0, 80, 100);

    // var c = canvas.toDataURL("image/png");
    // console.log(c);

    // var v = document.getElementById("di")[0].getElementsByTagName('img');



    // var img = new Image();
    // img = _data[0];

    //var canvas = document.createElement("canvas");
    // canvas.width = 500;
    // canvas.height = 500;

    // img.onload = function() {
    //     ctx.drawImage(img, 10, 10);
    // }


    function f() {
        var c = document.getElementById("myCanvas");
        var ctx = c.getContext("2d");
        var a = document.getElementById("wode");

        var _data = document.getElementById("di").getElementsByTagName('img')[0];
        ctx.drawImage(_data, 10, 10);
    }

    f();


    // console.log(_data);
    // console.log(img);
</script> -->

</html>